<nz-card>
    <div class="common-search-wrap">
        <div class="common-search-btns">
            <button
                *ngIf="permission.userPermission.has('marketing:adPosition:add')"
                nz-button
                nzType="primary"
                (click)="jumpPage(0)">
                新增广告位置
            </button>
        </div>

        <div class="common-search-forms">
            <div class="common-form-item">
                <label class="common-search-label">广告位名称</label>
                <div class="common-search-conrol">
                    <input nz-input placeholder="请输入广告位名称" [(ngModel)]="seachForms.name" />
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">广告ID</label>
                <div class="common-search-conrol">
                    <input nz-input placeholder="请输入广告ID" [(ngModel)]="seachForms.advertId" />
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">状态</label>
                <div class="common-search-conrol">
                    <nz-select
                        nzShowSearch
                        nzAllowClear
                        nzPlaceHolder="全部"
                        [(ngModel)]="seachForms.state">
                        <nz-option nzValue="0" nzLabel="正常"></nz-option>
                        <nz-option nzValue="1" nzLabel="已删除"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <div class="common-search-conrol">
                    <button nz-button nzType="primary" class="m-r-8" (click)="searchData()">查询</button>
                    <button nz-button nzType="default" (click)="resetData()">重置</button>
                </div>
            </div>
        </div>
    </div>
</nz-card>

<nz-card class="pagination-wrap-position m-t-2">
    <!-- Table -->
    <div class="table-wrap">
        <nz-table
            #basicTable
            nzSize="small"
            nzOuterBordered
            nzShowSizeChanger
            nzShowQuickJumper
            [nzFrontPagination]="false"
            [nzLoadingDelay]="100"
            [nzLoading]="tableForms.tableLoading"
            [nzData]="tableData"
            [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
            [nzTotal]="tableForms.total"
            [nzPageIndex]="tableForms.page"
            [nzPageSize]="tableForms.pageSize"
            [nzShowTotal]="totalTemplate"
            (nzPageIndexChange)="onPageIndexChange($event)"
            (nzPageSizeChange)="onPageSizeChange($event)"
        >
            <thead>
                <tr>
                    <th nzAlign="center" nzWidth="150px">ID</th>
                    <th nzAlign="center" nzWidth="150px">状态</th>
                    <th nzAlign="center" nzWidth="250px">所属渠道</th>
                    <th nzAlign="center" nzWidth="170px">所属业务</th>
                    <th nzAlign="center">所属页面</th>
                    <th nzAlign="center" nzWidth="170px">名称</th>
                    <th nzAlign="center">尺寸/比例</th>
                    <th nzAlign="center">广告数量</th>
                    <th nzAlign="center">操作</th>
                </tr>
            </thead>

            <tbody>
                <tr *ngFor="let data of basicTable.data">
                    <td nzAlign="center">{{ data.id || '-' }}</td>
                    <td nzAlign="center">
                        <span [ngStyle]="{'color': data.state == 0 ? '#008000' : '#f00000'}">
                            {{ data.state == 0 ? '正常' : data.state == 1 ? '已删除' : '-' }}
                        </span>
                    </td>
                    <td nzAlign="center">
                        {{ data.platform | channelStatus: {list: channelLists, type: 'text'} }}
                    </td>
                    <td nzAlign="center">
                        {{ data.belongingBusiness | businessStatus: {list: businessLists} }}
                    </td>
                    <td nzAlign="center">{{ data.belongingPage || '-' }}</td>
                    <td nzAlign="center">{{ data.name || '-' }}</td>
                    <td nzAlign="center">{{ data.size || '-' }}</td>
                    <td nzAlign="center">{{ data.number || '-' }}</td>
                    <td nzAlign="center">
                        <button [disabled]="data.state == 1" nz-button nzType="link" (click)="jumpPage(1, data)" *ngIf="permission.userPermission.has('marketing:adPosition:edit')">编辑</button>
                        <a
                            *ngIf="data.state != 1 &&permission.userPermission.has('marketing:adPosition:delete')"
                            class="confirm-box"
                            nz-button
                            nz-button-tdlink
                            nzType="link"
                            nzDanger
                            nz-popconfirm
                            nzPopconfirmTitle="确认删除吗？删除后前端将无法再获取到该配置下的广告内容"
                            [nzIcon]="iconTpl"
                            (nzOnConfirm)="deleteConfirm(data.id)">删除</a>
                        <ng-template #iconTpl>
                            <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                        </ng-template>
                    </td>
                </tr>
            </tbody>
        </nz-table>

        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ tableForms.total }} 条</ng-template>
    </div>
</nz-card>
